<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>档案管理系统</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/dist/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/dist/css/ionicons.min.css">
    <link rel="stylesheet" href="/static/dist/css/AdminLTE.min.css">
    <link rel="stylesheet" href="/static/dist/css/skins/all-skins.min.css">
    <link rel="stylesheet" href="/static/css/bootstrap-treeview.css">
    <link rel="stylesheet" href="/static/css/bootstrapValidator.min.css">
    <link rel="stylesheet" href="/static/css/bootstrap-table.min.css">
    <link rel="stylesheet" href="/static/layer/theme/default/layer.css">
    <link rel="stylesheet" href="/static/css/viewer.min.css">
    <link rel="stylesheet" href="/static/css/bootstrap-table.min.css">
    <link rel="stylesheet" href="/static/webCss/ckclxx.css?v=shujubuwqd12138">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="/static/plugins/ie9/html5shiv.min.js"></script>
    <script src="/static/plugins/ie9/respond.min.js"></script>
    <![endif]-->
</head>
<body class="hold-transition skin-blue" style="font-size: medium">
<div class="content " id="yhgl">
    <div id="tree2">
        <img id="tree2Img" dataUrl="http://211.159.186.65:33333/api/fj/downloadFj?type=1&fileName=1590982068983.jpg">
    </div>
    <div class="row">
        <div class="col-xs-6 clLeft">
            <div class="row" style="height: 54px;border-bottom: 1px solid #E0E0E0">
                <div class="col-xs-3">
                    <label style="color: #3A3A3A;font-weight: 600;padding-top: 17px;font-size: 16px" id="clxxtab2">材料基本信息</label>
                </div>
            </div>
            <form role="form" id="clxxForm">
                <div>
                    <div class="row" style="height: 653px">
                        <div class="nav-tabs-custom">
                            <!-- Tabs within a box -->
                            <ul class="nav nav-tabs pull-right">
                                <li class="pull-left"><i class="fa fa-inbox"></i> 基本信息</li>
                            </ul>
                            <div class="tab-content no-padding">
                                <!-- Morris chart - Sales -->
                                <div class="chart tab-pane active" style="position: relative">
                                    <div class="row">
                                        <div class="form-group col-xs-6">
                                            <label>*档案类型</label>
                                            <div>
                                                <div class="input-group">
                                                    <!--<span class="input-group-addon btn btn-primary" data-toggle="modal" data-target="#lxxzModal" @click="clSelect">选择</span>-->
                                                    <input type="text" class="form-control input-sm" v-model="clxx.typeName" readonly>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group col-xs-6">
                                            <label>*档案编号</label>
                                            <input name="dabh" v-model="clxx.dabh" type="text" class="form-control input-sm" readonly>
                                        </div>
                                        <div class="form-group col-xs-6">
                                            <label>*文件序号</label>
                                            <input name="wjxh" v-model="clxx.wjxh" type="text" class="form-control input-sm" readonly>
                                        </div>
                                        <div class="form-group col-xs-6">
                                            <label>页数</label>
                                            <input name="ys" v-model="clxx.ys" type="text" class="form-control input-sm" readonly>
                                        </div>
                                        <div class="form-group col-xs-12">
                                            <label>*材料名称</label>
                                            <textarea name="clmc" v-model="clxx.clmc" type="text" class="form-control input-sm" style="height: 64px" readonly></textarea>
                                        </div>
                                        <div class="form-group col-xs-6">
                                            <label>起始页码</label>
                                            <input name="qsym" v-model="clxx.qsym" type="text" class="form-control input-sm" readonly>
                                        </div>
                                        <div class="form-group col-xs-6">
                                            <label>终止页码</label>
                                            <input name="zzym" v-model="clxx.zzym" type="text" class="form-control input-sm" readonly>
                                        </div>
                                    </div>
                                </div>
                                <!--<div class="chart tab-pane" id="sales-chart" style="position: relative; height: 300px;"></div>-->
                            </div>
                        </div>
                        <div class="nav-tabs-custom">
                            <!-- Tabs within a box -->
                            <ul class="nav nav-tabs pull-right">
                                <li class="pull-left"><i class="fa fa-inbox"></i> 其他</li>
                            </ul>
                            <div class="tab-content no-padding">
                                <!-- Morris chart - Sales -->
                                <div class="chart tab-pane active" style="position: relative">
                                    <div class="row">
                                        <div class="form-group col-xs-6">
                                            <label>份数</label>
                                            <input name="fs" v-model="clxx.fs" type="text" class="form-control input-sm" readonly>
                                        </div>
                                        <div class="form-group col-xs-6">
                                            <label>年份</label>
                                            <input name="year" v-model="clxx.year" type="text" class="form-control input-sm" readonly>
                                        </div>
                                        <div class="form-group col-xs-6">
                                            <label>案卷号/文号/许可证号</label>
                                            <input name="otherZh" v-model="clxx.otherZh" type="text" class="form-control input-sm" readonly>
                                        </div>
                                        <div class="form-group col-xs-6">
                                            <label>受理时间</label>
                                            <input name="slsj" v-model="clxx.slsj" type="text" class="form-control input-sm" readonly>
                                        </div>
                                        <div class="form-group col-xs-12">
                                            <label>备注</label>
                                            <textarea class="form-control" v-model="clxx.bz" name="bz" readonly></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="col-xs-6 clRight">
            <div class="row" style="height: 54px;border-bottom: 1px solid #E0E0E0">
                <label class="col-xs-2" style="color: #3A3A3A;font-weight: 600;padding-top: 17px;font-size: 16px">相关材料信息</label>
            </div>
            <table class="table table-bordered table-hover text-center" id="clTable" style="table-layout: fixed;">

            </table>
        </div>
    </div>

</div>

<script src="/static/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<!-- Slimscroll -->
<script src="/static/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="/static/plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="/static/dist/js/app.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="/static/dist/js/demo.js"></script>
<!--tabs-->
<script src="/static/dist/js/app_iframe.js"></script>
<script src="/static/js/bootstrap-treeview.js"></script>
<script src="/static/js/bootstrapValidator.min.js"></script>
<script src="/static/js/bootstrap-table.min.js"></script>
<script src="/static/js/bootstrap-table-zh-CN.js"></script>
<script src="/static/js/vue.js"></script>
<script src="/static/js/vue-resource.min.js"></script>
<script src="/static/layer/layer.js"></script>
<script src="/static/js/myJs.js"></script>
<script src="/static/js/viewer.min.js"></script>
<script src="/static/dist/js/pages/wJs.js"></script>
<script src="/static/js/newJs.js?v=shujubuwqd12138"></script>

<script type="text/javascript">
    newCss("/static/webCss/ckclxx.css");
    var id;
    function paramsMatter(value,row,index) {
        var span=document.createElement('span');
        span.setAttribute('title',value);
        span.innerHTML = value;
        return span.outerHTML;
    }
    function ck(id) {
        vue.$http.get('queryClxxById?id='+id).then(function (result) {
            var data = result.body;
            if(data.code == 200){
                vue.$data.clxx = data.data.leftClxx;
            }else {
                cxAlert(data.mess);
            }
        });
        $("#clTable").bootstrapTable('destroy');
        $('#clTable').bootstrapTable({
            url: 'queryClxxById?id='+id,
            contentType: "application/json; charset=UTF-8",
            type: "GET",
            dataType: 'json',
            queryParamsType: "",
            singleSelect: true,
            paginationShowPageGo: true,
            pageNumber:1,
            pageSize:8,
            queryParams: function (params) {
                return {'pageNum':params.pageNumber,'pageSize':params.pageSize};
            },
            striped: true,
            smartDisplay:false,
            cache: false,
            //pagination: true,
            //pageList: [8],
            sidePagination: 'server',
            toolbar: "#addtool",
            columns: [
                {
                    title: '文件序号',
                    field:'wjxh',
                    formatter:paramsMatter
                },{
                    field: 'clmc',
                    title: '材料名称',
                    formatter:paramsMatter
                },
                {
                    title: '起始页码',
                    field:'qsym',
                    formatter:paramsMatter
                },{
                    field: 'zzym',
                    title: '终止页码',
                    formatter:paramsMatter
                },{
                    field: 'ys',
                    title: '页数',
                    formatter:paramsMatter
                },{
                    title: '操作',
                    formatter: function (value, row, index) {
                        var aStr = '<a class="czBtn" href="javascript:ck('+row.id+')">查看</a>';
                        return aStr;
                    }
                }
            ],
            responseHandler: function (res) {  //后台返回的结果
                if (res.code == "200") {
                    var data = res.data.rightClxx;
                    var NewData = [];
                    for(i=0;i<data.length;i++){
                        var dd = data[i];
                        NewData.push(dd);
                    }
                    var data = {
                        total: res.data.total,
                        rows: NewData
                    };
                    return data;
                }
            }
        });
    }

    var vue = new Vue({
        el: '#yhgl',
        data: {
            kj:null,
            ws:null,
            dalx:null,
            cl:false,
            da:true,
            role:null,
            wsxx:{
                djr:null,
                inputtime:null,
                bz:null,
                jyId:null,
                id:null,
                typeId:null,
                dabh:null,//档案编号
                dwmc:null,//单位名称
                nf:null,//年份
                sj:null,//时间
                typeName:null,
                wh:null,//文号
                wjmc:null,//文件名称
                yh:null,//页号
                ys:null,//页数
                zhh:null,//总盒号
            },
            clxx:{
                slsj:null,
                typeName:null,
                clmc:null,
                otherZh:null,
                dabh:null,
                typeId:null,
                wjxh:"001",
                //clmc:null,
                fs:null,
                qsym:null,
                zzym:null,
                ys:null,
                year:null,
                otherZh:null,
                bz:null
            }
        },
        methods: {
        },
        created: function () {
            $.get('/getUser').then( function (result) {
                var data = result.data;
                if(result.code == 200){
                    vue.$data.role = data.roleId;
                    vue.$data.wsxx.djr = data.name;
                }
            });
        },
        mounted: function () {
            var that = this;
            var url2 = location.search;
            var id = url2.substring(url2.indexOf('&')+1);
            id = id.substring(id.indexOf('=')+1);
            this.$http.get('queryClxxById?id='+id).then(function (result) {
                var data = result.body;
                if(data.code == 200){
                    that.clxx = data.data.leftClxx;
                }else {
                    cxAlert(data.mess);
                }
            })
            this.$http.get('/dagl/api/queryDalx').then( function (result) {
                var data = result.body;
                if(data.code == 200){
                    getkjAndws(data.data);
                    that.zt = that.kj;
                }else{
                    cxAlert(data.mess);
                }
            });
            $("#clTable").bootstrapTable('destroy');
            $('#clTable').bootstrapTable({
                url: 'queryClxxById?id='+id,
                contentType: "application/json; charset=UTF-8",
                type: "GET",
                dataType: 'json',
                queryParamsType: "",
                singleSelect: true,
                paginationShowPageGo: true,
                pageNumber:1,
                pageSize:8,
                queryParams: function (params) {
                    return {'pageNum':params.pageNumber,'pageSize':params.pageSize};
                },
                striped: true,
                smartDisplay:false,
                cache: false,
                //pagination: true,
                //pageList: [8],
                sidePagination: 'server',
                toolbar: "#addtool",
                columns: [
                    {
                        title: '文件序号',
                        field:'wjxh',
                        formatter:paramsMatter
                    },{
                        field: 'clmc',
                        title: '材料名称',
                        formatter:paramsMatter
                    },
                    {
                        title: '起始页码',
                        field:'qsym',
                        formatter:paramsMatter
                    },{
                        field: 'zzym',
                        title: '终止页码',
                        formatter:paramsMatter
                    },{
                        field: 'ys',
                        title: '页数',
                        formatter:paramsMatter
                    },{
                        title: '操作',
                        formatter: function (value, row, index) {
                            var aStr = '<a class="czBtn" href="javascript:ck('+row.id+')">查看</a>';
                            return aStr;
                        }
                    }
                ],
                responseHandler: function (res) {  //后台返回的结果
                    if (res.code == "200") {
                        var data = res.data.rightClxx;
                        var NewData = [];
                        for(i=0;i<data.length;i++){
                            var dd = data[i];
                            NewData.push(dd);
                        }
                        var data = {
                            total: res.data.total,
                            rows: NewData
                        };
                        return data;
                    }
                }
            });
        }
    });


</script>

</body>
</html>
